<template>
  <div>
    
    <el-table :data="table_config.tableData" style="width: 100%" border>
        <!-- <el-table-column v-if="table_config.checkbox" type="selection" ></el-table-column> -->
      <el-table-column type="index" align="center" label="序号" width="60px"></el-table-column>

      <template  v-for="(item,index) in table_config.tableHead">
        <el-table-column :key="index" v-if="item.columnType === 'slot'"  :prop="item.prop" :label="item.label" :width="item.width">
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.columnType === 'tip'"  :show-overflow-tooltip="true" :render-header="icons"  :key="index" :prop="item.prop" :label="item.label" :width="item.width">
        </el-table-column>
        <el-table-column  :key="index" v-else :prop="item.prop" :label="item.label" :width="item.width">
        </el-table-column>

      </template>
    </el-table>
  </div>
  
</template>

<script>
export default {
  components: {},
  props:{
    table_config:{
      type:Object
    }
  },
  data() {
    return {};
  },
  created(){
    console.log(this.table_config);
    console.log(this.table_config.tableData);
  },
  methods: {
    icons(h,{column}){
        const inReview = '需要进行线下发放的奖品项数(非奖品数)，例如，一个中奖项设置奖品A一次中奖数量为2，一共有10人中奖待发放，那次数展示的数量为10，而不是20。已发放奖品项目同理。自动线上发放的虚拟物品不会占用“待发放奖品项数”'
        const inReviews = '需要进行线下发放的奖品项数(非奖品数)，例如，一个中奖项设置奖品A一次中奖数量为2，一共有10人中奖待发放，那次数展示的数量为10，而不是20。已发放奖品项目同理。自动线上发放的虚拟物品不会占用“待发放奖品项数”'
        return h(
　　　　    'div', [
                h('span', column.label),
                h('el-tooltip', {
                    props: {
                        placement: 'top'
                    }
                }, [
                    h('div', {
                        slot: 'content',
                        style: {
                            'width':'250px',
                            whiteSpace: 'normal',
                            'margin-bottom': '10px'
                        }
                    }, inReview),
                   
                    h('i', {
                        class: 'el-icon-warning-outline',
                        style: 'color:red;margin-left:5px;'
                    })
                ],)
            ]
　　　　 )
      }
  },
};
</script>

<style scoped>
</style>